<template>
	<view>
		<view style="width:100%;height:25upx;"></view>
		<view class="invoices">
			<view class="list">
				<text>店铺名称：</text>
				<view class="input arrow">
					<text>></text><text>发票类型</text>
				</view>
			</view>
			<view class="list" style="padding-bottom:0;margin-left:25upx;text-indent:unset;">
				<text>抬头类型：</text>
				<view class="input agent_type">
					<radio-group @change="radioChange">
						<label v-for="(item, index) in items" :key="item.value">
								<radio :value="item.value" :checked="index === current" color="#52c41a" style="transform:scale(0.7);" />
								{{item.name}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="list">
				<text>发票抬头：</text>
				<view class="input arrow">
					<text>></text><text>抬头名称</text>
				</view>
			</view>
			<view class="list">
				<text>设置为默认抬头：</text>
				<view class="input arrow">
					<text>></text><text>按钮</text>
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="list">
				<text>发票内容：</text>
				<view class="input arrow">
					<text></text><text>明细</text>
				</view>
			</view>
		</view>
		<view class="is_invoices">
			<view class="list">
				<text>本次不开具发票，继续下单：</text>
				<view class="input arrow">
					<text></text><text>按钮</text>
				</view>
			</view>
		</view>
		
		<view class="submit">
			<view>完成</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: '1',
						name: '个人或事业单位'
					},
					{
						value: '2',
						name: '企业',
						checked: 'true'
					},
				],
				current: 0
			}
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			}
		}
	}
</script>

<style>
page{
	background-color: #f3f3f3;
}
.invoices{
	width:700upx;
	margin:0 25upx;
	background-color:#FFFFFF;
	border-radius:25upx;
}
.list{
	width:700upx;
	padding-top:25upx;
	padding-bottom:25upx;
	text-indent:20upx;
}
.list text{
	color:#111111;
	font-size:24upx;
	height:60upx;
	line-height:60upx;
}
.list .input{
	color:#999999;
	font-size:24upx;
	display:inline-block;
	overflow:unset;
	height:60upx;
	line-height:60upx;
	float:right;
}
.arrow{
	height:40upx !important;
	line-height:40upx !important;
}
.arrow text{
	color:#999999;
	float:right;
}
.detail{
	width:700upx;
	height:100upx;
	margin:25upx;
	background-color:#FFFFFF;
	border-radius:25upx;
}
.is_invoices{
	width:700upx;
	height:100upx;
	margin:25upx;
	background-color:#FFFFFF;
	border-radius:25upx;
}
.submit{
	margin-top:100upx;
	text-align:center;
}
.submit view{
	background-color:#ff6101;
	color:#FFFFFF;
	font-size:28upx;
	width:700upx;
	height:80upx;
	line-height:80upx;
	margin:auto;
	border-radius:40upx;
}
</style>
